{extend name="layouts/iframe" /}

{block name="pagecss"}
<style>
    .doc-icon {
        font-size: 0;
    }
    .doc-icon li {
        display: inline-block;
        vertical-align: middle;
        width: 20%;
        /*height: 65px;*/
        line-height: 25px;
        padding: 20px 0;
        margin-right: -1px;
        margin-bottom: -1px;
        border: 1px solid #e2e2e2;
        font-size: 14px;
        text-align: center;
        color: #666;
        cursor: pointer;
        transition: all .3s;
        -webkit-transition: all .3s;
    }
    .doc-icon li:hover {
        color: #fff;
        background-color: #5FB878;
    }
    .doc-icon li .layui-icon {
        display: inline-block;
        font-size: 36px;
    }
    .doc-icon li .doc-icon-fontclass {
        height: 30px;
        line-height: 20px;
        padding: 0 5px;
        font-size: 13px;
        color: #333;
    }
</style>
{/block}

{block name="content"}
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body" style="padding: 15px;">
            <div class="layui-tab layui-tab-brief" lay-filter="">
                <ul class="layui-tab-title">
                    <li class="layui-this"> Layui 图标 <span class="layui-badge">{{:count($datas.layuis)}}</span></li>
                    <li class=""> Simple Line Icons <span class="layui-badge">{{:count($datas.simple_lines)}}</span></li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <ul class="doc-icon layui-row">
                            {foreach $datas.layuis as $layui}
                                <li class="layui-col-sm4 layui-col-md3 layui-col-lg2">
                                    <i class="layui-icon {{$layui}}" data-class="{{$layui}}"></i>
                                    <div class="doc-icon-fontclass">{{$layui}}</div>
                                </li>
                            {/foreach}
                        </ul>
                    </div>
                    <div class="layui-tab-item">
                        <ul class="doc-icon layui-row">
                            {foreach $datas.simple_lines as $simple_line}
                                <li class="layui-col-sm4 layui-col-md3 layui-col-lg2">
                                    <i class="layui-icon {{$simple_line}}" data-class="{{$simple_line}}"></i>
                                    <div class="doc-icon-fontclass">{{$simple_line}}</div>
                                </li>
                            {/foreach}
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="pagescript"}
<script src="{{:asset('__STATIC__/admin/pages/js/icon_picker.js')}}" type="text/javascript"></script>
{/block}
